<div class="page-container" v-cloak>
    <el-card>
        <template #header>
            <div class="breadcrumb">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><a href="{:url('admin/setting/index')}">配置列表</a></el-breadcrumb-item>
                    <el-breadcrumb-item>站点配置</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </template>
        <div>
            <el-form label-width="120px" :model="setting">
                <el-form-item label="网站地址">
                    <el-input v-model="setting.url" placeholder="请输入站点名称"></el-input>
                </el-form-item>
                <el-form-item label="小程序名称">
                    <el-input v-model="setting.site_name" placeholder="请输入站点名称"></el-input>
                </el-form-item>
                <el-form-item label="小程序app_id">
                    <el-input v-model="setting.app_id" placeholder="请输入小程序app_id">"></el-input>
                </el-form-item>
                <el-form-item label="小程序密钥">
                    <el-input v-model="setting.app_secret" placeholder="小程序密钥">"></el-input>
                </el-form-item>
                <el-form-item label="微信服务商">
                    <el-input v-model="setting.sub_mch_id" placeholder="请输入微信服务商号">"></el-input>
                </el-form-item>
                <el-form-item label="api3支付key">
                    <el-input v-model="setting.apikey" placeholder="请输入api3key支付秘钥">"></el-input>
                </el-form-item>
                <el-form-item label="api3支付秘钥">
                    <el-input v-model="setting.api3" placeholder="请输入api3支付秘钥">"></el-input>
                </el-form-item>
                <el-form-item label="抽层手续费">
                    <el-input v-model="setting.commissions" placeholder="请输入抽层手续费比例">"></el-input>
                </el-form-item>
                <el-form-item label="公众号appid">
                    <el-input v-model="setting.mpapp_id" placeholder="公众号appid">"></el-input>
                </el-form-item>
                <el-form-item label="公众号密钥">
                    <el-input v-model="setting.mpapp_secret" placeholder="公众号密钥">"></el-input>
                </el-form-item>
                <el-form-item label="站点公告">
                    <el-input v-model="setting.site_description" placeholder="请输入站点公告" style="width: 400px"
                              :rows="5"
                              type="textarea"></el-input>
                </el-form-item>

                <el-form-item label="站点公告">
                    <div>
                        <ueditor placeholder="请输入站点公告" @update="richUpdateEvent"></ueditor>
                    </div>
                </el-form-item>
                <el-form-item label="图片">
                    <div v-if="setting.banner" v-for="(imgUrl, index) in setting.banner" :key="index"
                         @click="show_select_image=true">
                        <el-image class="form-upload__image" :src="imgUrl"></el-image>
                        <div class="form-small">
                            <small>宽349*高145</small>
                        </div>
                    </div>
                    <div v-else>
                        <el-button @click="show_select_image=true" type="primary">选择图片</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="联系微信">
                    <el-input v-model="setting.wx" placeholder="请输入微信号">"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="submitEvent" type="primary">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
    <select-image v-model:show="show_select_image" @confirm="selectImageConfirm"
                  @close="show_select_image=false"></select-image>
</div>
{hcmstag:include file="admin@/components/ueditor"}
{hcmstag:include file="admin@/components/upload/select-image"}
<script type="text/javascript">

</script>
<script>

    const App = {
        data() {
            return {
                show_select_image: false,
                setting: {
                    banner: [],
                },
                banner: [],
                editorConfig: {}
            }
        },
        mounted() {
            this.getInfo();

        },
        methods: {
            selectImageConfirm(e) {

                this.setting.banner = []; // 初始化数组，如果它还没有被初始化

                e.forEach(item => {
                    this.setting.banner.push(item.file_url);
                });
            },
            richUpdateEvent(e) {
                console.log('richUpdateEvent', e)
                this.setting.notice = e;
            },
            getInfo() {
                this.httpGet("{:url('admin/setting/site/info')}", {}).then(res => {
                    if (res.status) {
                        let {setting = {}} = res.data
                        if (setting.banner) {
                            setting.banner = JSON.parse(setting.banner)
                        }

                        this.setting = setting
                        console.log(this.setting.banner)
                        var ue = UE.getEditor('editor_content');
                        ue.ready(function () {
                            //设置编辑器的内容
                            ue.setContent(setting.notice);

                        });
                    }
                })
            },
            submitEvent() {
                this.httpPut("{:url('admin/setting/site')}", {setting: this.setting}, true).then(res => {
                    if (res.status) {
                        this.$message.success(res.msg)
                    }
                })
            }
        }
    }
</script>